<template>
  <div class="home">
    <div class="headers">
      <div class="headers-min">
          <Header></Header>
          <ly-tab
              v-model="selectedId"
              :items="items"
              :options="options"
              @change="tabChange">
          </ly-tab>
      </div>
    </div>
    <section class="wrapper">
        <div>
          <div v-for="(item,index) in newData" :key="index">
            <Swiper v-if="item.type == 'swiperList'" :swiperList="item.data"></Swiper>
            <Icons v-if="item.type == 'iconsList'" :iconsList="item.data"></Icons>
            <Recommend v-if="item.type == 'recommendList'" :recommendList="item.data"></Recommend>
            <Like v-if="item.type == 'likeList'" :likeList="item.data"></Like>
            <Ad v-if="item.type == 'adList'" :adList="item.data"></Ad>
          </div>
        </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'
import Tabbar from '@/components/common/Tabbar.vue';
import Header from '@/components/home/Header.vue';
import Swiper from '@/components/home/Swiper.vue';
import Icons from '@/components/home/Icons.vue';
import Recommend from '@/components/home/Recommend.vue';
import Like from '@/components/home/Like.vue';
import Ad from '@/components/home/Ad.vue';
import http from '@/common/api/request.js';
export default {
  name: "Home",
  data () {
    return {
      selectedId: 0,
      items:[],
      newData:[],
      options: {
        activeColor: '#b0352f'
        // 可在这里指定labelKey为你数据里文字对应的字段
      },
      oBetterScroll:''
    }
  },
  components: {
    Tabbar,
    Header,
    Swiper,
    Icons,
    Recommend,
    Like,
    Ad
  },
  methods: {
    tabChange(item,index){
        this.addData(index);
    },
    async getData(){

      let res = await http.$axios({
        url:'/api/index_List/0/data/1'
      });
      this.items = Object.freeze(res.topBar);
      this.newData = Object.freeze(res.data);
      this.$nextTick(()=>{
          this.oBetterScroll = new BetterScroll('.wrapper', {
              movable:true,
              zoom:true
          });
      }); 
    },
    async addData(index){
      let res = await http.$axios({
        url:'/api/index_List/'+ index +'/data/1'
      });
      // console.log(res);
      if(res.constructor != Array){
        this.newData = res.data;
      }else{
         this.newData = res;
      }
      
      this.$nextTick(()=>{
          this.oBetterScroll = new BetterScroll('.wrapper', {
              movable:true,
              zoom:true
          });
      }); 
    }
  },
  created () {
      this.getData();
  },
  mounted () {
    
  }
};
</script>
<style scoped>
.home{width: 100vw;height: 100vh;display: flex;flex-direction: column;overflow: hidden;}
.headers{width: 100%;height: 2.88rem;}
.headers .headers-min{position: fixed;left: 0;top: 0;}
.ly-tab{width: 100%;background: #fff;box-shadow:0 1px 10px 1px #ddd;}
::v-deep .ly-tabbar{box-shadow: none;border-bottom: none;}
section{flex: 1;overflow: hidden;}
</style>
